import dayjs from "dayjs";
import {BaseEle, css} from "./core.js"

class ZDatetimeLocalPicker extends BaseEle {
    constructor() {
        super();
        this.timezoneoffset = (new Date().getTimezoneOffset()) / 60
        this.attachShadow({mode: 'open'});
        this.setCSS(css`
            .datetimelocal-picker {
                display: flex;
                align-items: flex-start;
                background-color: var(--z-datetime-picker-bgc, #fff);
                border-radius: var(--z-def-border-radius, 4px);
                border:  var(--z-datetimelocal-picker-border, var(--z-def-border, 1px solid #ccc));
                box-shadow: var(--z-datetimelocal-picker-shadow,  var(--z-def-box-shadow, 0 2px 5px rgba(0,0,0,0.1)));
            }
            @media screen and (max-width: 600px){
                .datetimelocal-picker {
                    display: block;
                }
            }
        `);
        this._shadowRoot = this.shadowRoot;
        this._shadowRoot.innerHTML = `<div id="timepicker" class="datetimelocal-picker"
part="z_datetimelocal_picker_con"
>
  <z-date-picker id="date" 
   style="--z-date-picker-border: none; --z-date-picker-shadow: none; --z-date-picker-bgc: transparent;"
   part="z_datetimelocal_picker_date"
   ></z-date-picker>
     <z-time-picker id="time" 
      style="--z-time-picker-border: none; --z-time-picker-shadow: none; --z-time-picker-bgc: transparent;"
        part="z_datetimelocal_picker_time"
      ></z-time-picker>
</div>`;
        this.arr = [];
        this.getDomById('date').addEventListener('change', (e) => {
            this.onChange(e);
        });
        this.getDomById('time').addEventListener('change', (e) => {
            this.onChange(e);
        });
        requestAnimationFrame(() => {
            this._updateUI()
        })
    }
    _updateUI() {
        this.getDomById('timepicker').style.setProperty("--time-picker-column-max-height",
            (this.getDomById('date').getBoundingClientRect().height - 30) + "px");
    }
    get isoString() {
        let d = dayjs(this.arr.join('T'));
        d = d.add(this.timezoneoffset, 'hour')
        // console.dir(this.arr.join('T') + '-08:00')
        return d.format('YYYY-MM-DDTHH:mm:ss') + 'Z';
    }
    attrChanged(name, oldValue, newValue) {
        this._log('datetimepicker attrChanged', this._locks);
        if (this._locks) {
            return
        }
        if (name === 'value') {
            if(newValue === '') {
                newValue = new Date();
            }

            let d = dayjs(newValue);
            let o  = dayjs(oldValue);
            if (d.isSame(o)) {
                this._log('datetimepicker isSame', newValue);
                return;
            }

            this._log('datetimepicker attrChanged', oldValue, newValue, d);
            this.arr = [d.format("YYYY-MM-DD"), d.format("HH:mm:ss")];
            this.render()
        }
    }
    onChange(e) {
        this.setLock()
        this.arr = [
            this._shadowRoot.querySelector('#date').value,
            this._shadowRoot.querySelector('#time').value,
        ];
        this._log('datetimepicker onChange', this.isoString)
        this.value = this.isoString;
        this.dispatchEvent(new Event('change'));
    }
    render() {
        if (this.arr.length > 1) {
            this._shadowRoot.querySelector('#date').setAttribute('value', this.arr[0]);
            this._shadowRoot.querySelector('#time').setAttribute('value', this.arr[1]);
        }
    }
}

ZDatetimeLocalPicker.defsel('z-datetimelocal-picker',{
    attrs: {
        value: '',
    }
});